<template>
  <el-dialog :close-on-click-modal="false" :title="title" :type="type" :visible.sync="isVisible" :width="width"
             top="50px">
    <el-form :model="role" :rules="rules" label-position="right" label-width="100px" ref="form">
      <el-form-item :label="$t('table.role.code')" prop="code">
        <el-input :disabled="type==='edit'" v-model="role.code"/>
      </el-form-item>
      <el-form-item :label="$t('table.role.name')" prop="name">
        <el-input v-model="role.name"/>
      </el-form-item>
      <el-form-item :label="$t('table.role.state')" prop="state">
        <el-radio-group v-model="role.state">
          <el-radio-button :label="true">{{ $t('common.state.valid') }}</el-radio-button>
          <el-radio-button :label="false">{{ $t('common.state.invalid') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('table.role.describe')" prop="describe">
        <el-input v-model="role.describe"/>
      </el-form-item>
      <el-form-item :label="$t('table.role.dsType')" prop="dsType">
        <el-radio-group @change="dsTypeChange" v-model="role.dsType.code">
          <el-radio-button :key="index" :label="key" :value="key" v-for="(item, key, index) in enums.DataScopeType">
            {{ item }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :hidden="orgHidden" :label="$t('table.role.orgList')" prop="orgList">
        <el-tree
          :check-strictly="true"
          :data="orgList"
          :default-checked-keys="role.orgList"
          :default-expanded-keys="role.orgList"
          :expand-on-click-node="false"
          highlight-current
          node-key="id"
          ref="orgTree"
          show-checkbox
        />
      </el-form-item>
    </el-form>
    <div class="dialog-footer" slot="footer">
      <el-button @click="isVisible = false" plain type="warning">{{ $t('common.cancel') }}</el-button>
      <el-button @click="submitForm" plain type="primary">{{ $t('common.confirm') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import roleApi from '@/api/Role.js'
  import orgApi from '@/api/Org.js'

  export default {
    name: 'RoleEdit',
    components: {},
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'add'
      }
    },
    data() {
      return {
        role: this.initRole(),
        screenWidth: 0,
        width: this.initWidth(),
        orgList: [],
        orgHidden: true,
        enums: {
          DataScopeType: {}
        },
        rules: {
          name: [
            {required: true, message: this.$t('rules.require'), trigger: 'blur'},
            {min: 1, max: 255, message: this.$t('rules.range4to10'), trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (!this.type === 'add' && value.trim().length > 0) {
                  roleApi.check(value)
                    .then((response) => {
                      const res = response.data
                      if (res.data) {
                        callback('编码重复')
                      } else {
                        callback()
                      }
                    })
                } else {
                  callback()
                }
                callback()
              }, trigger: 'blur'
            }
          ],
          state: {required: true, message: this.$t('rules.require'), trigger: 'blur'},
          orgList: {
            validator: (rule, value, callback) => {
              if (this.role.dsType.code === 'CUSTOMIZE') {
                if (this.$refs.orgTree.getCheckedKeys().length > 0) {
                  callback()
                } else {
                  callback('请至少选择一个单位或部门')
                }
              } else {
                callback()
              }
            }
          }
        }
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
          this.reset()
        }
      },
      title() {
        return this.type === 'add' ? this.$t('common.add') : this.$t('common.edit')
      }
    },
    watch: {},
    mounted() {
      this.initOrg()
      window.onresize = () => {
        return (() => {
          this.width = this.initWidth()
        })()
      }
    },
    methods: {
      initRole() {
        return {
          id: '',
          code: '',
          name: '',
          orgList: [],
          state: true,
          describe: '',
          dsType: {
            code: 'SELF',
            desc: ''
          }
        }
      },
      initWidth() {
        this.screenWidth = document.body.clientWidth
        if (this.screenWidth < 991) {
          return '90%'
        } else if (this.screenWidth < 1400) {
          return '45%'
        } else {
          return '800px'
        }
      },
      initOrg() {
        orgApi.allTree({state: true})
          .then((response) => {
            const res = response.data

            this.orgList = res.data
          })
      },
      loadListOptions({callback}) {
        callback()
      },
      setRole(val = {}) {
        const vm = this

        if (val['enums']) {
          vm.enums = val['enums'];
        }

        if (val['row']) {
          vm.role = {...val['row']}

          this.orgHidden = vm.role.dsType.code !== 'CUSTOMIZE'
          if (!this.orgHidden) {
            roleApi.getDetails(vm.role.id)
              .then((response) => {
                const res = response.data
                if (res.isSuccess) {
                  this.role.orgList = res.data.orgList
                  this.$refs.orgTree.setCheckedKeys(res.data.orgList)
                }
              })
          }

        }
      },
      close() {
        this.$emit('close')
      },
      reset() {
        // 先清除校验，再清除表单，不然有奇怪的bug
        this.$refs.form.clearValidate()
        this.$refs.form.resetFields()
        this.role = this.initRole()
        this.orgHidden = true
        this.$refs.orgTree.setCheckedKeys([])
      },
      submitForm() {
        const vm = this
        this.$refs.form.validate((valid) => {
          if (valid) {
            vm.editSubmit()
          } else {
            return false
          }
        })
      },
      editSubmit() {
        const vm = this
        if (this.orgHidden && this.role.orgList) {
          this.role.orgList.length = 0
        } else {
          this.role.orgList = this.$refs.orgTree.getCheckedKeys()
        }

        if (vm.type === 'add') {
          vm.save()
        } else {
          vm.update()
        }
      },
      save() {
        const vm = this
        roleApi.save(this.role)
          .then((response) => {
            const res = response.data
            if (res.isSuccess) {
              vm.isVisible = false
              vm.$message({
                message: vm.$t('tips.createSuccess'),
                type: 'success'
              })
              vm.$emit('success')
            }
          })
      },
      update() {
        roleApi.update(this.role)
          .then((response) => {
            const res = response.data
            if (res.isSuccess) {
              this.isVisible = false
              this.$message({
                message: this.$t('tips.updateSuccess'),
                type: 'success'
              })
              this.$emit('success')
            }
          })
      },
      dsTypeChange(value) {
        this.orgHidden = value !== 'CUSTOMIZE'
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>
